<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="css/quill.snow.css">
		<!-- <script src="https://cdn.quilljs.com/1.2.0/quill.js"></script> -->
		
		<script src="js/katex.min.js"></script>
		<script src="js/highlight.min.js"></script>
		<script src="js/quill.js"></script>
		<title>监管政策法规</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				<a @click="goprev">
					<el-button type="text" icon="el-icon-arrow-left">返回</el-button>
				</a>
			</div>
			<div class="pd10">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="标题：">
						<el-input type="text" v-model="form.name" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="内容：">
						<!-- 创建编辑容器 -->
						<div id="editor"></div>						
						<el-upload 
							class="avatar-uploader" 
							:action="ImgApiMore" 
							:show-file-list="false" 
							:on-success="uploadSuccess" 
							:data="param"
							accept=".png,.jpg"
							style="display:none;">
						</el-upload>
					</el-form-item>
					<el-form-item>
						<el-button class="exitbtn" type="primary" @click="onSubmit">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</body>
	<script src="elementui-lib/lib/vue.js"></script>
	<script src="elementui-lib/lib/index.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/data.js"></script>
	<script>
		var quill
		var toolbarOptions = [
			['bold', 'italic', 'underline', 'strike'], //开关按钮
			['blockquote', 'code-block'],
			[{'header': 1}, {'header': 2}], //自定义按钮值
			[{'list': 'ordered'}, {'list': 'bullet'}],
			[{'script': 'sub'}, {'script': 'super'}], // 上标/下标
			[{'indent': '-1'}, {'indent': '+1'}], // 减少缩进/缩进
			[{'direction': 'rtl'}], // 文本方向
			[{'size': ['small', false, 'large', 'huge']}], // 自定义下拉
			[{'header': [1, 2, 3, 4, 5, 6, false]}],
			[{'color': []}, {'background': []}], //使用主题的默认下拉
			[{'font': []}],
			[{'align': []}],
			['clean'], //移除格式化
			['image'],
			['video'],
			['formula'] //需要加载cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
		];
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					id: "",
					form: {
						name: "",
						content: ""
					},	
					ImgbaseUrl:ImgbaseUrl,
					ImgApiMore: uploadPic,
				}
			},
			methods: {
				goprev: function() {
					window.history.go(-1); //返回上一页
				},
				search: function() {
					console.log(this.formInline)
				},
				// 确定
				IsNull: function() {
					let flag = false;
					if (this.form.name == "") {
						this.$message.error('标题不能为空');
						return flag = true;
					}
				},
				onSubmit: function() {
					let that = this;
					const innerHTML = document.querySelector('#editor').children[0].innerHTML
					console.log(innerHTML)
					// this.form.content = innerHTML
					if (that.IsNull()) {
						return;
					}
					// console.log(this.form)
					// window.location.href = 'regulatory.html'; //此处拼接内容
				},
				// 富文本图片上传
				uploadSuccess(res, file) {
					console.log('---------',file.name)
					const url = file.name
// 					const addImageRange = this.quill.getSelection()
// 					const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
// 					this.quill.insertEmbed(newRange, 'image', url)
// 					this.quill.setSelection(1 + newRange)
					// res为图片服务器返回的数据
					// 获取富文本组件实例
					let quill = this.quill
// 					// 如果上传成功
// 					if (res.meta.res === '200') {
					  // 获取光标所在位置
					  let length = quill.getSelection().index;
					  // 插入图片  res.info为服务器返回的图片地址
					  // quill.insertEmbed(length, 'image', 'https://goss.veer.com/creative/vcg/veer/800water/veer-143590116.jpg');
					  quill.insertEmbed(length, 'image', ImgbaseUrl+''+url);
					  // 调整光标到最后
					  quill.setSelection(length + 1)
// 					} else {
// 					  this.$message.error('图片插入失败')
// 					}
				},
			},
			mounted:function(){
				var quill = new Quill('#editor', {
					modules: {
						toolbar: {
							  container: toolbarOptions,  // 工具栏
							  handlers: {
								'image': function (value) {
								  if (value) {
									// 触发input框选择图片文件
									document.querySelector('.avatar-uploader input').click();
								  }
								}
							  },
							}
					},
					theme: 'snow'
				});
				this.quill = quill
				// this.quill.getModule("toolbar").addHandler("image", this.imgHandler)

// 			    var quill = new Quill('#editor-container', {
// 					modules: {
// 					  formula: true,
// 					  syntax: true,
// 					  toolbar: '#toolbar-container'
// 					},
// 					theme: 'snow'
// 				});
			},
			created() {
				this.id = getQueryString("id");
				if (this.id == null) {
					console.log('==添加')
				} else {
					console.log('==编辑')
				}
			},
		});
	</script>
</html>
